import React from 'react';
import { Modal, Form, Input, Button } from 'antd';

const { TextArea } = Input;

const formItemLayout = {
  labelCol: {
    xs: { span: 24 },
    sm: { span: 6 },
  },
  wrapperCol: {
    xs: { span: 24 },
    sm: { span: 16 },
  },
};

function Deal({ visible, close, form, onConfirm }) {
  const { getFieldDecorator } = form;

  const handSubmit = () => {
    onConfirm('回参');
  };

  return (
    <Modal
      title="选择异常单指引"
      width="500px"
      destroyOnClose
      onCancel={close}
      visible={visible}
      onOk={handSubmit}
    >
      <Form>
        <Form.Item label="操作指引" {...formItemLayout}>
          {getFieldDecorator('externalUserId', {
            rules: [
              {
                required: true,
                message: '操作指引不能为空',
              },
            ],
          })(<Input placeholder="请输入" />)}
        </Form.Item>
        <Form.Item label="链接路径" {...formItemLayout}>
          {getFieldDecorator('exterUserId')(<TextArea rows={2} placeholder="请输入链接路径" />)}
        </Form.Item>
        <Form.Item label="指引方法" {...formItemLayout}>
          {getFieldDecorator('externalUserCode')(
            <TextArea rows={3} placeholder="请输入指引方法" />
          )}
        </Form.Item>
      </Form>
    </Modal>
  );
}

export default Form.create()(Deal);
